<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>order_list</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="../css/mui.min.css">
    <script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="../css/css.css">
    <style type="text/css">
    	html,body{
    		height: 100%;
    		background-color: #FFFFFF;
    	}
        .mui-control-content .mui-loading {
            margin-top: 50px;
        }

        .mui-title {
            color: #353535;
        }

        .mui-slider-indicator.mui-segmented-control {
            background: #ffffff;
        }

        .mui-bar {
            background: #ffffff;
        }

        .mui-bar-nav {
            top: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        .mui-bar {
            border-bottom: 1px solid #E4E4E4;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        .mui-content {
            background: #f6f6f6;
        }

        .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
            /*	margin-bottom: 0.133rem;*/
            background-color: #1C83FC;
        }

        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
            color: #1C83FC;
        }

        .mui-segmented-control .mui-control-item {
            line-height: 1.28rem;
        }

        .mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
            border: none;
        }

        .mui-bar .mui-title {
            font-size: 0.48rem;
            font-family: 'PingFangSC-Semibold';
        }

        .mui-col-xs-4 {
            width: 25%;
        }

        .mui-slider-indicator.mui-segmented-control {
            position: fixed;
            z-index: 999;
        }

        .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
            position: fixed;
            top: 2.453rem
        }

        .mui-slider .mui-slider-group {
            margin-top: 1.57rem;
        }

        .mui-scroll-wrapper {
            position: static;
        }

        .mui-scroll {
            position: static;
        }

        .mui-table-view-cell {
            padding: 0;
            margin-bottom: 0.2667rem;
        }

        .mui-table-view-cell.mui-active {
            background-color: #ffffff !important;
        }

        .mui-table-view {
            background: #f6f6f6;
        }

        .mui-table-view-cell {
            position: static;
            background: #ffffff;
        }

        .mui-segmented-control .mui-control-item {
            font-size: 0.4rem;
        }

        .mui-slider-group {
            background-color: #ffffff;
        }
        .no_data{
            padding-top: 50px;
        }
    </style>
    <!--App自定义的css-->
    <!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
</head>

<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">我的拼团</h1>
    </header>
    <div class="mui-content" id="order">
        <div id="slider" class="mui-slider">
            <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <a class="mui-control-item mui-active" href="#item1mobile">
                    拼团中
                </a>
                <a class="mui-control-item" href="#item2mobile">
                    代付款
                </a>
                <a class="mui-control-item" href="#item3mobile">
                    拼团成功
                </a>
                <a class="mui-control-item" href="#item4mobile">
                    拼团失败
                </a>
            </div>
            <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
            <div class="mui-slider-group">
                <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                    <div id="scroll1" class="mui-scroll-wrapper">
                        <div class="mui-scroll">
                            <div class="no_data" v-show="!my_group_pintuanzhong">
                                
                                <img src="../images/no_data.jpg" alt="">
                            </div>
                            <ul class="mui-table-view">

                                <li class="mui-table-view-cell" v-for="daifus in my_group_pintuanzhong">
                                    <div class="order_list_info_top">
                                        <div class="order_list_info_top_text">{{daifus.shangjia}}</div>
                                        <div class="order_list_info_top_state">
                                            <span>{{daifus.zhuangtai}}</span>

                                        </div>
                                    </div>
                                    <div class="order_list_info_container" v-for="orders in daifus.order">
                                        <div class="order_list_info_container_img">
                                            <img :src="orders.pic" />
                                        </div>
                                        <div class="order_list_info_container_right">
                                            <div class="order_list_info_container_right_text">{{orders.name}}</div>
                                            <div class="order_list_info_container_right_num">X {{orders.num}}</div>
                                            <div class="order_list_info_container_right_price">￥{{orders.price}}</div>
                                        </div>
                                    </div>

                                    <div class="order_list_info_bottom">
                                        <div class="order_list_info_bottom_productNum">共{{daifus.znum}}件商品</div>
                                        <div class="order_list_info_bottom_productAdd">合计</div>
                                        <div class="order_list_info_bottom_productPic">￥{{daifus.zprice}}</div>
                                        <div class="order_list_info_bottom_productBtn">
                                            <!-- <div class="order_list_info_bottom_productBtn_left order_list_info_bottom_productBtn_one">{{daifus.btn1}}</div> -->
                                            <div class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one" @click="to_do(daifus.btn1)">{{daifus.btn1}}</div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="item2mobile" class="mui-slider-item mui-control-content">
                    <div id="scroll2" class="mui-scroll-wrapper">
                        <div class="mui-scroll">
                                <div class="no_data" v-show="!my_group_daifukuan">
                                
                                        <img src="../images/no_data.jpg" alt="">
                                    </div>
                            <ul class="mui-table-view">
                                <li class="mui-table-view-cell" v-for="item in my_group_daifukuan">
                                    <div class="order_list_info_top">
                                        <div class="order_list_info_top_text">{{item.shangjia}}</div>
                                        <div class="order_list_info_top_state">{{item.zhuangtai}}</div>
                                    </div>
                                    <div class="order_list_info_container" v-for="order in item.order">
                                        <div class="order_list_info_container_img">
                                            <img :src="order.pic" />
                                        </div>
                                        <div class="order_list_info_container_right">
                                            <div class="order_list_info_container_right_text">{{order.name}}</div>
                                            <div class="order_list_info_container_right_num">X {{order.num}}</div>
                                            <div class="order_list_info_container_right_price">￥{{order.price}}</div>
                                        </div>
                                    </div>
                                    <div class="order_list_info_bottom">
                                        <div class="order_list_info_bottom_productNum">共{{item.znum}}件商品</div>
                                        <div class="order_list_info_bottom_productAdd">合计</div>
                                        <div class="order_list_info_bottom_productPic">￥{{item.zprice}}</div>
                                        <div class="order_list_info_bottom_productBtn">
                                            <div class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one" @click="to_do(item.btn1)">{{item.btn1}}</div>
                                            <div class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_three" @click="to_do(item.btn2)">{{item.btn2}}</div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <!--<div class="mui-loading">
									<div class="mui-spinner">
									</div>
								</div>-->
                        </div>
                    </div>

                </div>
                <div id="item3mobile" class="mui-slider-item mui-control-content">
                    <div id="scroll3" class="mui-scroll-wrapper">
                        <div class="mui-scroll">
                                <div class="no_data" v-show="!my_group_pintuanchenggong">
                                
                                        <img src="../images/no_data.jpg" alt="">
                                    </div>
                            <ul class="mui-table-view">
                                <li class="mui-table-view-cell" v-for="i in my_group_pintuanchenggong">
                                    <div class="order_list_info_top">
                                        <div class="order_list_info_top_text">{{i.shangjia}}</div>
                                        <div class="order_list_info_top_state">{{i.zhuangtai}}</div>
                                    </div>
                                    <div class="order_list_info_container" v-for="order in i.order">
                                        <div class="order_list_info_container_img">
                                            <img :src="order.pic" />
                                        </div>
                                        <div class="order_list_info_container_right">
                                            <div class="order_list_info_container_right_text">{{order.name}}</div>
                                            <div class="order_list_info_container_right_num">X {{order.num}}</div>
                                            <div class="order_list_info_container_right_price">￥{{order.price}}</div>
                                        </div>
                                    </div>
                                    <div class="order_list_info_bottom">
                                        <div class="order_list_info_bottom_productNum">共{{i.znum}}件商品</div>
                                        <div class="order_list_info_bottom_productAdd">合计</div>
                                        <div class="order_list_info_bottom_productPic">￥{{i.zprice}}</div>
                                        <div class="order_list_info_bottom_productBtn">
                                            <div class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_two" @click="to_do(i.btn2)">{{i.btn2}}</div>
                                            <div class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one" @click="to_do(i.btn1)">{{i.btn1}}</div>
                                        </div>
                                    </div>
                                </li>

                            </ul>
                            <!--<div class="mui-loading">
									<div class="mui-spinner">
									</div>
								</div>-->
                        </div>
                    </div>

                </div>
                <div id="item4mobile" class="mui-slider-item mui-control-content">
                    <div id="scroll4" class="mui-scroll-wrapper">
                        <div class="mui-scroll">
                                <div class="no_data" v-show="!my_group_pintuanzhong">
                                
                                        <img src="../images/no_data.jpg" alt="">
                                    </div>
                            <ul class="mui-table-view">

                                <li class="mui-table-view-cell" v-for="i in my_group_pintuanshibai">
                                    <div class="order_list_info_top">
                                        <div class="order_list_info_top_text">{{i.shangjia}}</div>
                                        <div class="order_list_info_top_state">{{i.zhuangtai}}</div>
                                    </div>

                                    <div class="order_list_info_container" v-for="o in i.order">
                                        <div class="order_list_info_container_img">
                                            <img :src="o.pic" />
                                        </div>
                                        <div class="order_list_info_container_right">
                                            <div class="order_list_info_container_right_text">{{o.name}}</div>
                                            <div class="order_list_info_container_right_num">X {{o.num}}</div>
                                            <div class="order_list_info_container_right_price">￥{{o.price}}</div>
                                        </div>
                                    </div>

                                    <div class="order_list_info_bottom">
                                        <div class="order_list_info_bottom_productNum">共{{i.znum}}件商品</div>
                                        <div class="order_list_info_bottom_productAdd">合计</div>
                                        <div class="order_list_info_bottom_productPic">￥{{i.zprice}}</div>
                                        <div class="order_list_info_bottom_productBtn">
                                            <div class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_two" @click="to_do(i.btn1)">{{i.btn1}}</div>
                                            <!-- <div class="order_list_info_bottom_productBtn_left order_list_info_bottom_productBtn_one">待评价</div> -->
                                        </div>
                                    </div>
                                </li>

                            </ul>
                            <!--<div class="mui-loading">
									<div class="mui-spinner">
									</div>
								</div>-->
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script src="../js/mui.min.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/host.config.js"></script>
    <script>
        var app = new Vue({
            el: '#order',
            data: {
                my_group_pintuanzhong: '',
                my_group_daifukuan: '',
                my_group_pintuanchenggong: '',
                my_group_pintuanshibai: ''
            },
            methods: {
                to_do: function (k) {
                    mui.toast(k)
                },
                to_get_data: function (url, cb) {



                    mui.ajax(host_config.host+url, {

                        dataType: 'json',//服务器返回json格式数据
                        type: 'get',//HTTP请求类型
                        timeout: 10000,//超时时间设置为10秒；
                        
                        success: function (res) {
                            //服务器返回响应，根据响应结果，分析是否登录成功；
                            console.log(res);
                            if (res.code == 200) {
                                cb(res)
                            }
                        },
                        error: function (xhr, type, errorThrown) {
                            //异常处理；
                            console.log(type);
                        }
                    });
                }
            },
            mounted: function () {
                var that = this;
                this.to_get_data("/sim_data/my_group_daifukuan.json", function (res) {
                    that.my_group_daifukuan = res.data
                })
                this.to_get_data("/sim_data/my_group_pintuanchenggong.json", function (res) {
                    that.my_group_pintuanchenggong = res.data
                })
                this.to_get_data("/sim_data/my_group_pintuanshibai.json", function (res) {
                    that.my_group_pintuanshibai = res.data
                })
                this. to_get_data("/sim_data/my_group_pintuanzhong.json",function(res){
                    that.my_group_pintuanzhong = res.data
                })
            }
        })
        mui.init({

        });

    </script>

</body>

</html>